<template>
  <div class="home">
    <header class="header">
      <div class="header-box">
        <div class="time">
          <h4>Today</h4>
          <p>
            <span>{{ time.md }} / {{ time.day }}</span>
          </p>
        </div>
        <div class="search">
          <div class="search-box">
            <span class="icon fa fa-search"></span>
            <input
              type="text"
              placeholder="请输入菜名或者食材搜索"
              class="search-inp"
              @click="toSearch"
            />
            <div class="hot">
              <router-link
                :to="{ path: '/search', query: { name: '可乐鸡翅' } }"
                >可乐鸡翅</router-link
              >
              <router-link
                :to="{ path: '/search', query: { name: '红烧排骨' } }"
                >红烧排骨</router-link
              >
              <router-link :to="{ path: '/search', query: { name: '红烧肉' } }"
                >红烧肉</router-link
              >
              <router-link :to="{ path: '/search', query: { name: '汤' } }"
                >汤</router-link
              >
              <router-link
                :to="{ path: '/search', query: { name: '麻婆豆腐' } }"
                >麻婆豆腐</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="module newProducts">
      <comp-title>
        <van-cell title="今日推荐" is-link value="查看全部" class="title" />
      </comp-title>
      <div class="content">
        <div v-for="item in fakeData" :key="item.id" @click="showDesc(item.id)">
          <comp-mod-item class="item">
            <div class="image-box">
              <img :src="`${item.pic}`" alt="" />
            </div>
            <div class="text-box">
              <h4 class="name">{{ item.name }}</h4>
              <p class="intro">
                {{ item.content }}
              </p>
            </div>
          </comp-mod-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import dayjs from "dayjs";

import compTitle from "@/components/comp-title.vue";
import CompModItem from "@/components/comp-modItem.vue";
import CompFooter from "@/components/comp-footer.vue";

export default {
  name: "Home",
  data() {
    return {
      time: {
        md: "",
        day: "",
      },
      fakeData: [
        {
          id: 5,
          classid: 2,
          name: "翡翠彩蔬卷",
          content:
            "春天是为夏天做准备的刮油季，为了夏天能够美美的穿上漂亮的花裙子，让我们一起来狠狠的刮油吧。这个色彩缤纷的彩蔬卷，低热量，高营养，是一道秀色可餐的减肥餐~",
          pic: "http://api.jisuapi.com/recipe/upload/20160719/115138_19423.jpg",
        },
        {
          id: 39,
          classid: 2,
          name: "糙米燕麦南瓜粥",
          content:
            "糙米是指除了外壳之外都保留的全谷粒。<br />糙米中米糠和胚芽部分含有丰富的维生素B和维生素E，能提高人体免疫功能，促进血液循环，还能帮助人们消除沮丧烦躁的情绪，使人充满活力，并且糙米还能预防便秘，降压降血脂。<br />燕麦中富含膳食纤维和皂苷素，可以帮助调节人体的肠胃功能，预防便秘。<br />它还含有丰富的维生素E，可以保持肌肤弹性，是上好的美容品。<br />南瓜内含有维生素和果胶可保护胃肠，解毒促消化，亦能降压，降血糖，抗癌是非常有益身体的健康蔬果。<br />此款药膳粥最适合中老年人食用，可滋肾，补气，降压降脂，尤其是高血压高血糖患者可经常食用，有很好的食疗效果。",
          pic: "http://api.jisuapi.com/recipe/upload/20160719/115144_28391.jpg",
        },
        {
          id: 327,
          classid: 3,
          name: "水果西米酸奶捞",
          content:
            "现在市场很多提子跟西瓜买，都是夏天很好消暑水果，冰镇过后再吃就更清爽了。西瓜<br />  能清热生津，解渴除烦。西瓜果肉内亦含有瓜氨酸及精氨酸等成份，能加增尿素的形成，有利尿作用<br />  酸奶是一种半流体的发酵乳制品，因其含有乳酸成分而带有柔和酸味，它可帮助人体更好地消化吸收奶中的营养成分。<br />   水果的清爽，酸奶的酸甜，西米的Q，非常棒的一款甜品。",
          pic: "http://api.jisuapi.com/recipe/upload/20160719/115243_54467.jpg",
        },
        {
          id: 21,
          classid: 2,
          name: "苹果莲子炖银耳",
          content:
            "苹果有“智慧果”、“记忆果”的美称。人们早就发现，多吃苹果有增进记忆、提高智能的效果。苹果不仅含有丰富的糖、维生素和矿物质等大脑必需的营养素，而且更重要的是富含锌元素。据研究，锌是人体内许多重要酶的组成部分，是促进生长发育的关键元素。能够提高人体免疫力。<br />苹果银耳羹，苹果有生津、润肺，除烦解暑、开胃醒酒、止泻的功效；银耳既有补脾开胃的功效，又有益气清肠的作用，还可以滋阴润肺、长期服用可以润肤，并有祛除脸部黄褐斑、雀斑的功效。",
          pic: "http://api.jisuapi.com/recipe/upload/20160719/115140_97489.jpg",
        },
      ],
    };
  },
  components: {
    compTitle,
    CompModItem,
    CompFooter,
  },
  created() {
    this.initTime();
  },

  methods: {
    initTime() {
      let date = new Date();
      this.time.md = dayjs(date).format("MM.DD");
      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.time.day = arr[dayjs().day()];
    },
    toSearch() {
      this.$router.push({ path: "/search" });
    },
    showDesc(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
}
.module {
  padding: 10px 0;
}
.header {
  width: 100%;
  height: 200px;
  overflow: hidden;
  .header-box {
    width: 110%;
    height: 90%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 10px;
    background-image: url("../assets/images/bg2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    .time {
      position: absolute;
      left: 60px;
      top: 0;
      z-index: 0;
      color: #fff;
      h4 {
        font-weight: "宋体";
        font-weight: 500;
        padding: 10px 0 5px 0;
      }
      p {
        font-size: 12px;
      }
    }
    .search {
      background-color: rgba(0, 0, 0, 0.4);
      height: 110%;
      width: 94%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      .search-box {
        width: 80%;
        position: relative;
        .icon {
          position: absolute;
          left: 60px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 16px;
        }
        .search-inp {
          width: 100%;
          height: 30px;
          font-size: 12px;
          padding-left: 80px;
          box-sizing: border-box;
          border-radius: 5px;
          background-color: rgba(255, 255, 255, 0.8);
        }
        .hot {
          position: absolute;
          left: 0;
          top: 30px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          a {
            flex-grow: 1;
            color: #fff;
            font-size: 12px;
            height: 14px;
            line-height: 14px;
            margin-top: 10px;
            padding: 0 10px;
            border-right: 0.5px solid #fff;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}

.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 80px;
  > div {
    flex-grow: 1;
    flex-basis: 48%;
    margin-bottom: 20px;
  }
  .van-cell.title {
    padding: 0 !important;
  }
}
</style>
